<template>
	<view class="index">
		<view class="jtop">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<!-- <view class="jtop_l" @tap="navigateBack"><image src="../../static/img/ic_back.png"></image></view> -->
			<view class="jtop_l" @tap="navigateBack">取消</view>
			<view class="jtop_c">新增机械</view>
			<view class="jtop_r" :style="{'opacity':name ? '1':'.6'}" @tap="jsave">确定</view>
		</view>
		<view class="tophr"></view>
		
		
		
		
		<!-- <view class="addb">
			<view class="addb_1">
				2020年6月27日    星期一
			</view>
		</view> -->
		<view class="addb">
			<view class="addi2">
				<text>设备名称</text>
				<input type="text" placeholder="请输入设备名称(必填)" :value="name" @input="onKeyInput_o" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="addi2">
				<text>设备老板</text>
				<input type="text" placeholder="请输入设备老板名称(必填)" :value="owner" @input="onKeyInput_t" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="addi2">
				<text>设备型号</text>
				<input type="text" placeholder="请输入型号" :value="model" @input="onKeyInput_c" placeholder-style="color:#CCCCCC"/>
			</view>
		</view>
		
		
		<!-- <view class="mm">
			<view :class="[sj ? 'active' : '']"  @tap="bt_sj">
				<text>按时间</text>
				<i></i>
			</view>
			<view :class="[sj ? '' : 'active']" @tap="bt_sj">
				<text>按表盘数</text>
				<i></i>
			</view>
		</view> -->
		<view class="addb">
			<view class="addi2">
				<text>单价</text>
				<input type="number" placeholder="请输入单价" :value="dj" @input="onKeyInputdj" placeholder-style="color:#CCCCCC"/>
			</view>
		</view>

		
		<view :class="[sj ? 'addb' : 'addb hide']">
			
			<e-picker-plus endRule="2040-12-31" class="addbi" @confirm="confirm" mode="YMD">
				<text class="addbil">进场时间</text>
				<image src="../../static/img/jt.png" @confirm="confirm"></image>
				<text class="addbir"  @confirm="confirm" >{{startDate}}</text>
			</e-picker-plus>
			
			<e-picker-plus endRule="2040-12-31" class="addbi" @confirm="confirm2" mode="YMD">
				<text class="addbil">结束时间</text>
				<image src="../../static/img/jt.png" @confirm="confirm2"></image>
				<text class="addbir"  @confirm="confirm2" >{{endDate}}</text>
			</e-picker-plus>
		</view>	
			
		

		
		<view :class="[sj ? 'addb hide' : 'addb ']">
			<view class="addi2">
				<text>进场表盘数</text>
				<input type="text" placeholder="请输入读数" :value="parameter_f" @input="onKeyInput_f" placeholder-style="color:#CCCCCC"/>
			</view>
			<view class="addi2">
				<text>出场表盘数</text>
				<input type="text" placeholder="请输入读数" :value="parameter_i" @input="onKeyInput_i" placeholder-style="color:#CCCCCC"/>
			</view>
		</view>
		
		
		<view class="addb ">
			<view class="addi2">
				<text>应付金额(元)</text>
				<input type="text" placeholder="0.00" disabled  :value="yfj"   placeholder-style="color:#000"/>
			</view>
			<view class="addi2">
				<text>已付金额(元)</text>
				<input type="text" placeholder="请输入已付金额"  :value="parameter_q" @input="onKeyInput_q" placeholder-style="color:#CCCCCC"/>
			</view>

			<view class="addi2">
				<text>支付方式</text>
				<input type="text" placeholder="请输入支付方式"  :value="payMethod" @input="onKeyInput_payMethod" placeholder-style="color:#CCCCCC"/>
			</view>

		

			     <e-picker-plus

				class="addbi noborder"
				@confirm="confirm3"
				mode="YMDhm"
			>
				<text class="addbil">支付时间</text>
				<image src="../../static/img/jt.png" @confirm="confirm3"></image>
				<text class="addbir">{{ payTime }}</text>
			</e-picker-plus>


			<!-- <view class="addi2">
				<text>未付金额(元)</text>
				<input type="text" placeholder="0.00" :value="parameter_b" @input="onKeyInput_b" placeholder-style="color:#000"/>
			</view> -->
		</view>
	
		<view class="addi">
			<text>备注</text>
			<textarea
        auto-height="true"
        style="min-height: 150rpx;"
        maxlength="-1" placeholder-style="color:#CCCCCC" :value="parameter_x" @input="onKeyInput_x" placeholder="请输入备注"/>
		</view>
		
	<!-- 	<view class="addb">
			<view class="addi2">
				<text>上传支款收据</text>
				<view class="addi2_r">
					无
					<image src="../../static/img/jt.png"></image>
				</view>
			</view>
			<view class="addi2">
				<text>合同</text>
				<view class="addi2_r">
					无
					<image src="../../static/img/jt.png"></image>
				</view>
			</view>
		</view> -->
		
		
		
		
		
		<view class="addi">
			<text>对应单据</text>
			<view class="att">
				<view  v-for="(item, index) in jimg" :key="item.id">
					<image class="at" :src="item" @longpress="logoTime(index)"></image>
				</view>
				
				<image src="../../static/img/index/new/at.png" mode="" class="at" @tap="changeAvatar()"></image>
			</view>
		</view>
		
			
		<!-- 弹出层 删除图片-->
		<view :class="[ashowpop2 ? 'tc' : 'tc hide']">
				<view class="jtop_bj" ></view>
				<view class="tc_fbox">
					<view class="tc_fbox_bt2" @click="btTC_jdel">
						删除
					</view>
					<view class="tc_fbox_bt"  @click="btTCC">
						取消
					</view>
				</view>
		</view>
		
		
		
		
		<view class="addi">
			<text>合同</text>
			<view class="att">
				<view  v-for="(item, index) in ttp" :key="item.id">
					<image class="at" :src="item" @longpress="logoTtime(index)"></image>
				</view>
				
				<image src="../../static/img/index/new/at.png" mode="" class="at" @tap="changetAvatar()"></image>
			</view>
		</view>
		
			
		<!-- 弹出层 删除图片-->
		<view :class="[showTtC2 ? 'tc' : 'tc hide']">
				<view class="jtop_bj" ></view>
				<view class="tc_fbox">
					<view class="tc_fbox_bt2" @click="btTtC_jdel">
						删除
					</view>
					<view class="tc_fbox_bt"  @click="btTtCC">
						取消
					</view>
				</view>
		</view>
			

		
		
		
	
	

	</view>
</template>

<script>import request from '@/common/request.js'
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
		    return {
				repeat_click:true,
				jimg:[],
				ashowpop2:false,
				
				ttp:[],
				showTtC2:false,
				
				
				
		        ashowpop: false,
				ashowpop_jrename: false,
				ashowpop_jdel: false,
				ashowpopT: false,
				bj: false,
				yd:false,
				sj:false,
				
				startDate:"",
				endDate:"",
				
				jtitle:"",
				name:"",
				owner:"",
				model:"",
				parameter_f:"",
				parameter_i:"",
				parameter_s:"",
				parameter_q:"",
				parameter_b:"",
				parameter_x:"",
				yfj:"0.00",
				dj:"",
				payTime:"",
				payMethod:""
		    }
		},
		
		methods: {
			onKeyInputdj: function(event) {
				this.dj=event.detail.value;
				 console.log(this.startDate)
				 console.log(this.endDate)
				if(this.sj){
				
				console.log(this.dj)
					if(this.dj!=""  & this.startDate!="" & this.endDate!="" ){
							console.log(this.dj)
						var days = 0;
						 var  startDate = Date.parse(this.startDate);
						    var  endDate = Date.parse(this.endDate);
						    if (startDate>endDate){
						        days =  0;
						    }
						    if (startDate==endDate){
						        days = 1;
						    }
						     days=(endDate - startDate)/(1*24*60*60*1000);
						  console.log(days)
							
						this.yfj = this.dj *days
					}
				}
				
				if(!this.sj){
					
					if(this.dj&this.parameter_f&this.parameter_i){
						this.yfj = this.dj*(this.parameter_i - this.parameter_f)
					}
					
				}
			},
			onKeyInput_o: function(event) {
				this.name=event.detail.value;
			},

			onKeyInput_payMethod: function(event) {
				this.payMethod=event.detail.value;
			},

			onKeyInput_t: function(event) {
				this.owner=event.detail.value;
			},
			onKeyInput_c: function(event) {
				
				
				this.model=event.detail.value;
				
				
			},
			onKeyInput_f: function(event) {
				this.parameter_f=event.detail.value;
				if(this.dj&this.parameter_f&this.parameter_i){
					this.yfj = this.dj*(this.parameter_i - this.parameter_f)
				}
			},
			onKeyInput_i: function(event) {
				this.parameter_i=event.detail.value;

				console.log(this.parameter_i);
				
				if(this.dj&this.parameter_f&this.parameter_i){
					this.yfj = this.dj*(this.parameter_i - this.parameter_f)
				}
			},
			onKeyInput_l: function(event) {
				this.parameter_s=event.detail.value;
			},
			onKeyInput_q: function(event) {
				this.parameter_q=event.detail.value;
			},
			onKeyInput_b: function(event) {
				this.parameter_b=event.detail.value;
			},
			onKeyInput_x: function(event) {
				this.parameter_x=event.detail.value;
			},
			
			
			jsave(){
				if(!this.repeat_click){
					return
				}
				this.repeat_click = false;
					
				// if(!this.name){
					
				// 						this.repeat_click = true;
				//	uni.showToast({
				// 		title: '请输入分组名称',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				
				// 　	if (parseFloat(this.model).toString() == "NaN") {
				// 　　　　					this.repeat_click = true;
//					uni.showToast({
				// 			title: '单价格式错误',
				// 			icon: 'none'
				// 		})
				// 　　　　return false;
				// 　　} 

				
					var jd =  {

						machinery:{
							name:this.name,
							owner: this.owner,
							model :this.model,
							price :this.dj,
							machineryTypeId   : uni.getStorageSync("temp_data").id,
							remark :this.parameter_x,
						},
						payment:{
							payedAmount :this.parameter_q,
							payMethod :this.payMethod,
							payTime :this.payTime,
						}

						
					};
					
					if(this.sj){
						jd.machinery.startDate  = this.startDate;
						jd.machinery.endDate  = this.endDate;
						jd.machinery.type   = 1;
					}else{
						jd.machinery.startDialNumber  = this.parameter_f;
						jd.machinery.endDialNumber  = this.parameter_i;
						jd.machinery.type  = 2;
					}
					
					
					if(this.jimg != ""){
						jd.payment.voucher   = this.jimg.toString();
					}
					
					if(this.ttp != ""){
						jd.machinery.contract   = this.ttp.toString();
					}
					
					

				request({
					url: `/biz/machinery`,
					data:jd,
					
					method: 'POST',
					success: openIdRes => {
						
						console.log(openIdRes);
						if (openIdRes.data.success == true) {
							
							wx.showToast({
							    title: '添加成功',
							    icon: 'none',
							    duration: 1000,
							    success: function () {
							      setTimeout(function() {
									   uni.navigateBack()
							      }, 1500);
							    }
							});
							
							
							// uni.navigateBack()
						} else {
												this.repeat_click = true;
					uni.showToast({
								title: openIdRes.data.msg,
								icon: 'none'
							});
							this.isLoading = false;
						}
					},
					fail: () => {
											this.repeat_click = true;
					uni.showToast({
							title: '服务器开小差，请稍后~',
							icon: 'none'
						});
						return false;
					}
				});
				
						
			},
			
			
			
			//图片上传
			btTC_jdel(){
				var ax =  this.jimg;
				ax.splice(this.scdtp, 1)
				console.log("ax1111",ax)
				this.jimg =  ax;
				console.log("ax222",this.jimg)
				this.ashowpop2 = false;
			},
			
			btTCC(e){
				this.ashowpop2 = !this.ashowpop2;
			},
			
			logoTime(e){
				console.log(e);
				this.scdtp = e;
				this.ashowpop2 = true;
			},
			
			changeAvatar() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择、摄像头
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths,res.tempFiles[0]));
						that.sctp(res.tempFilePaths,res.tempFiles[0]);
					}
				});
			
			},
			
			
			sctp(a,b) {
				console.log(a);
				var als ="";
				var tpbt = b.name;
      if (tpbt == undefined || tpbt == 'undefined') {
        tpbt = b.path;
      }
				var pos = tpbt.lastIndexOf('.');
				var suffix = tpbt.substring(pos);
				function random_string(len) {　　
				      len = len || 32;　　
				      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';　　
				      var maxPos = chars.length;　　
				      var pwd = '';　　
				      for (var i = 0; i < len; i++) {　　
				          pwd += chars.charAt(Math.floor(Math.random() * maxPos));
				      }
				      return pwd;
				}
				var g_object_name = random_string(10) + suffix;
				
				
				  // 获取信息
				  request({
				  	url: '/biz/oss/policy', 
				  	method :"GET",
				  	
				  	success: (res) => {
						
						if(res.data.success == true) {
							als = res.data.data;
							request({
							    
							    filePath: a[0],
								oss:true,
								formData:{ 
									'name':tpbt,
									'key':als.dir + g_object_name,
									'policy': als.policy, 
									'OSSAccessKeyId': als.accessid,
									'signature':  als.signature,
									'callback': als.callback,
									'success_action_status' : '200', 
								}, 
								
								success: (res) => {
											var cc = JSON.parse(res.data);
											console.log('上传图片', cc);
											if (cc.code == "00000") {
												var dd = this.jimg;
												dd.push(cc.data.url+'/'+als.dir + g_object_name);
												this.jimg = dd;
			
															
											} else {
																	this.repeat_click = true;
					uni.showToast({
													title: cc.message,
													icon: 'none'
												})
											}
								}
								
							})		
				  		
						}
					}
				  });
				  
				  
			
			},
			//--图片上传
			
			
			
			
			//图片上传
			btTtC_jdel(){
				var ax =  this.ttp;
				ax.splice(this.scdttp, 1)
				console.log("ax1111",ax)
				this.ttp =  ax;
				console.log("ax222",this.ttp)
				this.showTtC2 = false;
			},
			
			btTtCC(e){
				this.showTtC2 = !this.showTtC2;
			},
			
			logoTtime(e){
				console.log(e);
				this.scdttp = e;
				this.showTtC2 = true;
			},
			
			changetAvatar() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择、摄像头
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths,res.tempFiles[0]));
						that.scttp(res.tempFilePaths,res.tempFiles[0]);
					}
				});
			
			},
			
			
			scttp(a,b) {
				console.log(a);
				var als ="";
				var tpbt = b.name;
      if (tpbt == undefined || tpbt == 'undefined') {
        tpbt = b.path;
      }
				var pos = tpbt.lastIndexOf('.');
				var suffix = tpbt.substring(pos);
				function random_string(len) {　　
				      len = len || 32;　　
				      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';　　
				      var maxPos = chars.length;　　
				      var pwd = '';　　
				      for (var i = 0; i < len; i++) {　　
				          pwd += chars.charAt(Math.floor(Math.random() * maxPos));
				      }
				      return pwd;
				}
				var g_object_name = random_string(10) + suffix;
				
				
				  // 获取信息
				  request({
				  	url: '/biz/oss/policy', 
				  	method :"GET",
				  	
				  	success: (res) => {
						
						if(res.data.success == true) {
							als = res.data.data;
							request({
							    
							    filePath: a[0],
								oss:true,
								formData:{ 
									'name':tpbt,
									'key':als.dir + g_object_name,
									'policy': als.policy, 
									'OSSAccessKeyId': als.accessid,
									'signature':  als.signature,
									'callback': als.callback,
									'success_action_status' : '200', 
								}, 
								
								success: (res) => {
											var cc = JSON.parse(res.data);
											console.log('上传图片', cc);
											if (cc.code == "00000") {
												var dd = this.ttp;
												dd.push(cc.data.url+'/'+als.dir + g_object_name);
												this.ttp = dd;
			
															
											} else {
																	this.repeat_click = true;
					uni.showToast({
													title: cc.message,
													icon: 'none'
												})
											}
								}
								
							})		
				  		
						}
					}
				  });
				  
				  
			
			},
			//--图片上传
			
			
			
			confirm3(e){
				 console.log(e);
							this.payTime = e.result;
			},
			
			confirm(e) {
			                console.log(e);
							this.startDate = e.result;

								if(this.dj!=""  & this.startDate!="" & this.endDate!="" ){
							console.log(this.dj)
						var days = 0;
						 var  startDate = Date.parse(this.startDate);
						    var  endDate = Date.parse(this.endDate);
						    if (startDate>endDate){
						        days =  0;
						    }
						    if (startDate==endDate){
						        days = 1;
						    }
						     days=(endDate - startDate)/(1*24*60*60*1000);
						  console.log(days)
							
						this.yfj = this.dj *days
					}

			},

			confirm2(e) {
			                console.log(e);
							this.endDate = e.result;

								if(this.dj!=""  & this.startDate!="" & this.endDate!="" ){
							console.log(this.dj)
						var days = 0;
						 var  startDate = Date.parse(this.startDate);
						    var  endDate = Date.parse(this.endDate);
						    if (startDate>endDate){
						        days =  0;
						    }
						    if (startDate==endDate){
						        days = 1;
						    }
						     days=(endDate - startDate)/(1*24*60*60*1000);
						  console.log(days)
							
						this.yfj = this.dj *days
					}
							
			},

			// 跳转
			jshow_pop() {
				this.ashowpop = !this.ashowpop;
			},
			btTC2() {
				uni.navigateTo({
					url: '../main/work_add',
				});
			},
			
			bt_sj(){
				this.sj = !this.sj;
			},
			
			navigateBack(){
				uni.navigateBack()
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName'])}
</script>

<style>
.mm{ width: 720rpx; margin: 0 0 0rpx 30rpx; height: auto;display: block;float: left; }	
.mm view{width: auto; height: 80rpx; margin: 0  50rpx 0 0rpx; display: block;float: left; overflow: hidden;}
.mm view text{width: auto; height: auto; margin: 0rpx 0 0rpx 0rpx; height: auto;display: block;font-size: 28rpx;line-height: 36px;color: #666666;}
.mm view i{width: 60rpx; height:20rpx; margin: 4rpx auto 0rpx; display: block;background: rgb(242,242,242); }
.mm view.active i{background: #256AFF; }
.mm view.active text{color: #256AFF; }

.tophr{ width: 100%; height: 88rpx; }
.uni-searchbar{box-shadow:none}

.at{ width: 160rpx;height: 160rpx; display: block; float: left; margin:0rpx 0 0 0; }
.att{width: 720rpx; margin: 0 0 30rpx 30rpx; height: auto;display: block;float: left;  background: #ffffff; }

.addb_1{width: 720rpx; margin: 20rpx  30rpx 20rpx 30rpx;font-size: 32rpx;
line-height: 40rpx;color: #000000; height: auto;display: block;float: left;  }
.addb_2{width: 720rpx; margin: 0rpx  30rpx 20rpx 30rpx;font-size: 32rpx;
line-height: 40rpx;color: #666666; height: auto;display: block;float: left;  }

.ptt{width: 100%; height: auto;display: block;float: left;  background: #ffffff; border: 1px solid #DDDDDD; border-left: 0; border-right: 0;  margin: 20rpx 0 0;}
.pttl{width: 84rpx; height: 84rpx; display: block;float: left; margin: 18rpx 20rpx 18rpx 30rpx;}
.pttr{width: 400rpx; height: 84rpx; display: block;float: left; margin: 18rpx 0rpx 0rpx 0rpx;}
.pttrt{width: 100%; height: 42rpx; line-height: 42rpx; display: block;float: left; font-size: 34rpx; color: #000000;}
.pttrf{width: 100%; height: 42rpx; line-height: 42rpx; display: block;float: left; font-size: 24rpx; color: #999999;}
.pttjt{width: 16rpx;height: 25rpx;display: block;float: right; margin: 48rpx 30rpx 0 30rpx;}
.ptf{width: 100%; height: auto;display: block;float: left;  background: #ffffff; border: 1px solid #DDDDDD; border-left: 0; border-right: 0;  margin: 20rpx 0 0;}
.ptft{width: 720rpx; margin: 0 0 0 30rpx; height: 90rpx;display: block;float: left;  background: #ffffff; }
.ptft image{width: 48rpx;height: 48rpx;display: block;float: left; margin: 21rpx 20rpx 0 0rpx;}
.ptft text{width: auto;height: 48rpx;display: block;float: left; margin: 21rpx 20rpx 0 0rpx;font-size: 34rpx; line-height: 48rpx; color: #000000;}

.addi2_r{width: auto;height: 48rpx;display: block;float: right; margin: 21rpx 20rpx 0 0rpx;font-size: 34rpx; line-height: 48rpx; color: #999999;}
.addi2_r image{width: 16rpx;height: 25rpx;display: block;float: right; margin: 15rpx 10rpx 0 30rpx;}



.addi2{width: 720rpx; margin: 0 0 0 30rpx; height: 90rpx;display: block;float: left;  background: #ffffff; border-bottom: 1px solid #DDDDDD;}
.addi2:last-child{ border: 0;}
.addi{width: 100%; height: auto;display: block;float: left;  background: #ffffff; box-shadow: inset 0px 1px 0px #DDDDDD, inset 0px -1px 0px #DDDDDD; margin: 20rpx 0 0;}
.addi2 text{width: 200rpx; height: 90rpx; display: block;float: left; line-height:90rpx;font-size: 34rpx;color: #000000; margin: 0 0 0 0rpx;}
.addi text{width: 200rpx; height: 90rpx; display: block;float: left; line-height:90rpx;font-size: 34rpx;color: #000000; margin: 0 0 0 30rpx;}
.addi input,.addi2 input{width: 480rpx; height: 50rpx; display: block;float: left; margin: 20rpx 30rpx 0 0; text-align: right; line-height:50rpx;font-size: 34rpx;color: #000000;}
.addb{width: 100%; height: auto;display: block;float: left;  background: #ffffff; border: 1px solid #DDDDDD; border-left: 0; border-right: 0;  margin: 20rpx 0 0;}
.addbi{width: 720rpx; margin: 0 0 0 30rpx; height: 90rpx;display: block;float: left;  background: #ffffff; border-bottom: 1px solid #DDDDDD;}
.addb .addbi:last-child{ border: none;}
.addbi .addbil{width: 200rpx; height: 90rpx; display: block;float: left; line-height:90rpx;font-size: 34rpx;color: #000000;}
.addbi .addbir{width: auto; height: 90rpx; display: block;float: right; line-height:90rpx;font-size: 32rpx;color: #000000;}
.addbi image{width: 16rpx;height: 25rpx;display: block;float: right; margin: 33rpx 30rpx 0 30rpx;}
.addi textarea{width: 690rpx; height:150rpx; display: block;float: left; margin: 0rpx 30rpx 20rpx; text-align: left; line-height:40rpx;font-size: 34rpx;color: #000000;}


.index{background: rgb(242,242,242);width: 100%; height: auto;}
.jtop{ width: 100%; height: 88rpx; background: #ffffff; position: fixed; top: 0; left: 0; z-index: 1000;box-shadow: inset 0px -1px 0px #DDDDDD;}
.jtop_l{width: auto; height: 88rpx; display: block;float: left; font-size: 32rpx; color: #000000; line-height: 88rpx; margin: 0 0 0 30rpx;}
.jtop_l image{width: 48rpx; height: 48rpx; display: block;float: left; margin: 20rpx 0 20rpx 0;}
.jtop_lt{margin: 0 0 0 10rpx;}
.jtop_r{width: 48rpx; height: 48rpx; display: block;float: right; margin: 20rpx 20rpx 0 0;}
.jtop_rl{margin: 20rpx 30rpx 0 0;}
.jtop_r image{width: 48rpx; height: 48rpx; display: block;float: left;}
.jtop_c{width: 70%; height: 48rpx; line-height: 48rpx; display: block;float: left; position: fixed; top: 20rpx; left: 15%; text-align: center; font-size: 36rpx;color: #000000;}
.jtop_c image{width: 36rpx; height: 36rpx; display: inline-block; float: none; margin-bottom: -5rpx; margin-left: 5rpx;}
.jtop_b{width: 100%; height: auto; background: #ffffff; position: fixed; top:88rpx; left: 0; z-index: 1001;}
.jtop_r{width: auto; height: 88rpx; display: block;float: right; margin: 0rpx 20rpx 0 0;line-height: 88rpx; font-size: 32rpx; color: #000000; color: #256AFF; }
.doc_b22{ opacity: .5;}

.nd{width: 735rpx; height: auto; display: block;float: left;margin: 0 0 0 0rpx; }
.nd_bt{ width: auto; height: 48rpx; display: block;float: right; border: 1px solid #DDDDDD; border-radius: 24rpx; margin: 40rpx 0 40rpx 30rpx;}
.nd_bt text{width: auto; height: 48rpx; display: block;float: left; margin: 0 7rpx 0 18rpx; line-height: 48rpx; color: #666666; font-size: 24rpx; }
.nd_bt image{width: 13rpx; height: 8rpx; display: block; float: left;  margin: 21rpx 14rpx 0 0;}



.tc{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:10000; display: block;}
.jtop_bj{width: 100%; height: 100%; background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; z-index:10000;}
.tc_fbox_bt{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 20rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox{ width: 100%; height: auto; display: block; float: left; background: #F2F2F2; position: fixed; left: 0; bottom: 0; z-index:10001; }
.tc_fbox_bt2{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-top: 0rpx solid #F2F2F2; background: #ffffff;}
.tc_fbox_bt3{width: 100%; height: 90rpx; line-height: 90rpx; display: block; float: left;text-align: center; font-size: 36rpx; color: #000000; border-bottom: 1px solid #DDDDDD; background: #ffffff;}


</style>